Vue.component("mymain",{
    data(){
        return {
            user: null,
            showQrcode: false
        };
    },
    template:`
<div>
  <login ref="lg" @logined="onlogin"></login>
  <header class="header">
    <nav class="navbar navbar-default" id="navbar">
      <div class="container">
        <div class="header-topbar hidden-xs link-border">
          <ul class="site-nav topmenu">
            <li><a href="tags.html">标签云</a></li>
            <li><a href="readers.html" rel="nofollow">读者墙</a></li>
            <li><a href="links.html" rel="nofollow">友情链接</a></li>
            <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" rel="nofollow">关注本站 <span class="caret"></span></a>
              <ul class="dropdown-menu header-topbar-dropdown-menu">
                <li><a data-toggle="modal" data-target="#WeChat" rel="nofollow"><i class="fa fa-weixin"></i> 微信</a></li>
                <li><a href="#" rel="nofollow"><i class="fa fa-weibo"></i> 微博</a></li>
                <li><a data-toggle="modal" data-target="#areDeveloping" rel="nofollow"><i class="fa fa-rss"></i> RSS</a></li>
              </ul>
            </li>
          </ul>
          <span v-if="user">
            欢迎 {{user.name}}!
            <a href="" @click.prevent="showPwdWin">修改密码</a>&nbsp;&nbsp;
            <a href="articleEdit.html">发布文章</a>&nbsp;&nbsp;
            <a href="" @click.prevent="logout">退出</a> 
          </span>
          <span v-else>
              <a href="" @click.prevent="showLoginWin">Hi,请登录</a>&nbsp;&nbsp;
              <a href="" @click.prevent="openQrcode">扫码登录</a>&nbsp;&nbsp;
              <a href="" class="register" @click.prevent="showRegWin">我要注册</a>&nbsp;&nbsp;
              <a href="" @click.prevent="showForgetWin">找回密码</a> 
          </span>
        </div>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <h1 class="logo hvr-bounce-in"><a href="" title=""><img src="images/logo.png" alt=""></a></h1>
        </div>
        <div class="collapse navbar-collapse" id="header-navbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="hidden-index active"><a data-cont="异清轩首页" href="index.html">异清轩首页</a></li>
            <li><a href="category.html">前端技术</a></li>
            <li><a href="category.html">后端程序</a></li>
            <li><a href="category.html">管理系统</a></li>
            <li><a href="category.html">授人以渔</a></li>
            <li><a href="category.html">程序人生</a></li>
          </ul>
          <form class="navbar-form visible-xs" action="/Search" method="post">
            <div class="input-group">
              <input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
              <span class="input-group-btn">
              <button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
              </span> </div>
          </form>
        </div>
      </div>
    </nav>
  </header>
  <section class="container">
    <slot></slot>
  </section>
  <footer class="footer">
    <div class="container">
      <p>&copy; 2016 <a href="">ylsat.com</a> &nbsp; <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">豫ICP备20151109-1</a> &nbsp; <a href="sitemap.xml" target="_blank" class="sitemap">网站地图</a></p>
    </div>
    <div id="gotop"><a class="gotop"></a></div>
  </footer>
  <el-dialog title="扫描登录" :visible.sync="showQrcode">
      <img src="http://192.168.15.225/sendQrcode" alt="">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showQrcode = false">关 闭</el-button>
      </span>
    </el-dialog>
  
</div>
    `,

    methods:{
        showLoginWin(){
            this.$refs.lg.openLoginWin();
        },
        onlogin(user){
            this.user = user;
            this.$emit("logined", user);
        },
        logout(){
            this.$refs.lg.logout();
        },
        showPwdWin(){
            this.$refs.lg.openPwdWin();
        },
        showForgetWin(){
            this.$refs.lg.openForgetWin();
        },
        openQrcode(){
            if( ! document.cookie.includes("uid=")){
                this.$alert("扫描登录前必须先使用账号密码登录一次本系统!");
                return;
            }

            this.showQrcode = true;
            let handle = setInterval(()=>{
                axios.get("http://192.168.15.225/lookUuid").then(res=>{
                    if(res.data.code){
                        axios.get("http://192.168.15.225/loginByUUID").then(res=>{
                            // 提示信息
                            this.$message(res.data.msg);
                            // 关闭窗口
                            this.showQrcode = false;
                            // 结束轮询
                            clearInterval(handle);
                            // 设置用户对象
                            this.user = res.data.data;
                        })
                    }
                });
            }, 1000);
        }
    }
})